<!DOCTYPE HTML>
<html>
  <head>	
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">		
	<meta name="Keywords" content="刘兴龙">
	<meta name="Description" content="">
	<title>hnust_LiuXingLong</title>
	<link href="favi.ico" rel="shortcut icon" type="image/x-icon" />
	<style type="text/css">	
	*{ margin:0;padding:0;}
	body{background:url("images/bg0.jpg")no-repeat top center;}
	a{
	  color:#fff; margin-top:20px;display:block;
	  margin-left:990px;font-size:13px;cursor:pointer;	
	 }	
	.sig{width:215px;height:16px;margin:150px 1100px;} 
	.sig{ background:#000;
		  filter:alpha(opacity=50);
		  background:rgba(0,0,0,0);
		}
	.sig p{ color:#090;font-family:"微软雅黑";position:relative;}			 
	.pic{width:1100px;height:430px; margin:170px auto 0;}
	.pic ul li{list-style:none;width:100xp;height:429px;float:left;}
	.pic .l1{ background-image:url("img/1.jpg");}
	.pic .l2{ background-image:url("img/2.jpg");}
	.pic .l3{ background-image:url("img/3.jpg");}
	.pic .l4{ background-image:url("img/4.jpg"); width:789px;}
	.txt{ width:100px; height:429px; 
		  background:#000;
		  filter:alpha(opacity=50);
		  background:rgba(0,0,0,.5);
		}
	.txt p{ color:#fff;font-family:"微软雅黑"; float:left; position:relative;}
	.txt .p1{ font-size:12px; width:12px; margin:25px 15px 0 20px;}
	.txt .p2{ font-size:14px; width:14px; margin-top:25px;}
	.head{width:100%; height:0px; background:#fff;overflow:hidden;
		  position:fixed;   
		  left:0px;top:0px;
	     }
	.menu{width:100%;height:45px;}				
	.title{
		   width:911px;height:45px;                                         
		   margin:0px auto;                                                  
		  }
	 .title .p1{width:571px; height:45px; background:url("images/tj.png"); float:left; cursor:pointer; }
	 .title .p2{width:45px;  height:45px; background:url("images/sq.png"); float:right;cursor:pointer; }
	 .bg{width:911px; height:205px; margin:25px auto;}                     
	 .bgcon{width:590px;  height:190px;  float:left;}					  
	 .bgcon img{ 
				width:97px;height:59px;display:block;float:left;
				margin-right:1px;margin-bottom:1px;
			   }
	 .bgcon .big{width:195px;height:119px;}
	 .bgcon .last{position:relative;top:-60px;}
	 .bgyl{
		   width:264px;height:180px;
		   float:right;background:url("images/bg0.jpg");
		   background-size:264px;
		  }
	</style>
 </head>
 <body>
	<audio autoplay="autopaly">
		<source src="Groove Coverage.mp3" type"audio/mp3"/>
	</audio>
	<a href="#">换肤</a> 
	<div class="pic">
		<ul>
			<li class="l1">
				<div class="txt">
					<p class="p1">作者 ：默默的墨墨</p>
					<p class="p2">我的个人拉萨之旅 |故事之城</p>
				</div>
			</li>
			<li class="l2">
				<div class="txt">
					<p class="p1">作者 ：美丽的天空</p>
					<p class="p2">拥有绝美的戈壁倾听啊沙的乐奏</p>
				</div>
			</li>
			<li class="l3">
				<div class="txt">
					<p class="p1">作者 ：蓝染热右介</p>
					<p class="p2">这美丽的香格里拉</p>
				</div>
			</li>
			<li class="l4">
				<div class="txt">
					<p class="p1">作者 ：美丽的天空</p>
					<p class="p2">征服个人项目     |南极</p>
				</div>
			</li>
		</ul>
	</div>       
	<div class="head">
		<div class="menu">
			<div class="title">
				<p class="p1"></p>
				<p class="p2"></p>
			</div>
		</div>
		<div class="bg">
			<div class="bgcon">
				<img class="big" src="images/0.jpg"/>
				<img src="images/1.jpg"/>
				<img src="images/2.jpg"/>
				<img src="images/3.jpg"/>
				<img src="images/4.jpg"/>
				<img src="images/5.jpg"/>
				<img class="big" src="images/6.jpg"/>
				<img src="images/7.jpg"/>
				<img src="images/8.jpg"/>
				<img class="last" src="images/9.jpg"/>
				<img class="last" src="images/10.jpg"/>
				<img class="last" src="images/11.jpg"/>
			</div>
			<div class="bgyl"><img src="images/yl.png"/></div>
		</div>
	</div>
	<div class="sig">
		<p class="p1">作者 ：hnust_LiuXingLong  时间 ：2015年4月8日</p>
	</div>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jquery1.js"></script>
		<script>
		 var i=0; 
		$(".pic ul li").hover(function(){
		  $(this).stop(true).animate({width:"789px"},500).siblings().stop(true).animate({width:"100px"},500);
		});	
		$("a").click(function(){
			$(".head").animate({height:"288px"},500);
		})
		$(".title .p2").click(function(){
			$(".head").animate({height:"0px"},500);
		})
		$(".bgcon img").hover(function(){
			i=$(this).index();
			$(".bgyl").css("background",'url(images/'+i+'.jpg)');
			$(".bgyl").css("backgroound-size","264px 180px");
		})
		$(".bgcon img").click(function(){
			$("body").css("background",'url(images/bg'+i+'.jpg)no-repeat top center');
		})
	</script>
 </body>
</html>














